<template>
  <a-drawer
    :title="formInfo.id==undefined?'新增':'修改'"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="formInfo"
        :label-col="$global.labelCol"
        :wrapper-col="$global.wrapperCol"
      >
            <a-row>
              <a-col :span="24">
            <a-form-model-item label="名称" prop="name" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.name" placeholder="请输入名称"/>
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="类型" prop="equType" :rules="$valid.required" :maxLength="50">
                <a-tree-select
                        v-model="formInfo.equType"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="typeTree"
                        placeholder="请选择"
                >
                </a-tree-select>
            </a-form-model-item>
          </a-col>
                <a-col :span="24">
                    <a-form-model-item label="设备小类" prop="equType1" :maxLength="50">
                        <a-input v-model="formInfo.equType1" placeholder="请输入设备小类"/>
                    </a-form-model-item>
                </a-col>

                <a-col :span="24">
                    <a-form-model-item label="设备编号" prop="equNo" :maxLength="50">
                        <a-input v-model="formInfo.equNo" placeholder="请输入设备编号"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="是否贴签" prop="isFlag" :maxLength="50">
                        <a-input v-model="formInfo.isFlag" placeholder="请输入是否贴签"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="房产类型" prop="roomType" :maxLength="50">
                        <a-input v-model="formInfo.roomType" placeholder="请输入房产类型"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="型号" prop="quality" :maxLength="50">
                            <a-input v-model="formInfo.quality" placeholder="请输入型号"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="资产原值" prop="equvalue" :maxLength="50">
                            <a-input v-model="formInfo.equvalue" placeholder="请输入价值"/>
                        </a-form-model-item>
                    </a-col>
            </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="品牌" prop="brand"  :maxLength="50">
                            <a-input v-model="formInfo.brand" placeholder="请输入品牌"/>
                        </a-form-model-item>
                    </a-col>
                  <a-col :span="24">
            <a-form-model-item label="生产厂商" prop="factory"  :maxLength="50">
              <a-input v-model="formInfo.factory" placeholder="请输入生产厂商"/>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="生产日期" prop="scDate"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.scDate"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择生产日期"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="启用日期" prop="anzDate"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.anzDate"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择启用日期"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
            <!--  <a-col :span="24">
            <a-form-model-item label="启用日期" prop="stDate" :rules="$valid.required" :maxLength="50">
                <a-date-picker
                        v-model="formInfo.stDate"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择启用日期"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>-->
                  <a-col :span="24">
            <a-form-model-item label="验收日期" prop="yansDate"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.yansDate"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择验收日期"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="使用时长" prop="lifes" :rules="$valid.required" :maxLength="50">
              <a-input v-model="formInfo.lifes" @blur="setRepDate()" type="number" placeholder="请输入使用时长" style="width: 40%"/>
                <a-select v-model="formInfo.lifesUnit" @blur="setRepDate()" placeholder="请选择时间单位" style="width: 30%">
                    <a-select-option v-for="(item) in this.$sysDictOptions('timeunit')" :key="item.k" :value="item.k">
                        {{ item.v }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
            </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="状态" prop="repFlag">
                            <a-select v-model="formInfo.useState" placeholder="请选择保修状态">
                                <a-select-option v-for="(item) in this.$sysDictOptions('useState')" :key="item.k" :value="item.k">
                                    {{ item.v }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
              <a-col :span="24">
            <a-form-model-item label="保修状态" prop="repFlag">
              <a-select v-model="formInfo.repFlag" placeholder="请选择保修状态">
                <a-select-option v-for="(item) in this.$sysDictOptions('repFlag')" :key="item.k" :value="parseInt(item.k)">
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
                  <a-col :span="24">
            <a-form-model-item label="保修到期日期" prop="repDate"  :maxLength="50">
                <a-date-picker
                        v-model="formInfo.repDate"
                        inputReadOnly
                        type="date"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择保修到期日期"
                        style="width: 100%;"
                />
            </a-form-model-item>
          </a-col>
            </a-row>

          <a-row>
              <a-col :span="24">
                  <a-form-model-item label="所在位置"   :maxLength="50">
                      <!--<dev-campus-tree
                              v-model="roomValue"
                              placeholder="请选择省市区"
                              :api-config="{
                  getFirstLevel: '/system/devCampusArea/getList',
                  getSecondLevel: '/system/devCampusBuilding/getList',
                  getThirdLevel: '/system/devCampusBuildingFloor/getList',
                  getFourthLevel: '/system/devCampusBuildingFloorRoom/getList',
                }"
                              @change="handleChange"
                      />-->
                      <a-cascader
                              v-if="optionsRoom.length"
                              v-model="roomValue"
                              :options="optionsRoom"
                              @change="handleChange"
                              change-on-select
                              placeholder="请选择地址"
                      />
                  </a-form-model-item>
              </a-col>

          </a-row>
                <a-row>
              <a-col :span="24">
            <a-form-model-item label="详细位置" prop="address"  :maxLength="50">
              <a-input v-model="formInfo.address" placeholder="请输入地址补充"/>
            </a-form-model-item>
          </a-col>

            </a-row>
      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import DevCampusTree from "../devCampus/DevCampusTree";
  export default {
    name: 'EquEquipmentEdit',
    components: {
        DevCampusTree
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
          typeTree:[],
          roomValue:[],
        formInfo: {
          name: undefined,
          equType: undefined,
          no: undefined,
          linkTel: undefined,
          links: undefined,
          brand: undefined,
          quality: undefined,
          factory: undefined,
          scDate: undefined,
          anzDate: undefined,
          stDate: undefined,
          yansDate: undefined,
          lifes: undefined,
          lifesUnit: undefined,
          repFlag: undefined,
          repDate: undefined,
          addressId: undefined,
          remark: undefined,
          files: undefined,
          address: undefined,
          departCode: undefined,
          createTime: undefined,
          sortOrder: undefined,
          wx: ''
        },
        drawerWidth: 800,
          expandedKeys: [],
          optionsRoom:[],
        url: {
          saveInfo: '/system/equEquipment/save',
            treelist: '/system/equType/tree',
            listTree: '/system/devCampusBuildingFloorRoom/listTree',
          getInfo: '/system/equEquipment/info'
        }
      }
    },
    created () {
        this.getRoomListTree()
    },
    methods: {
      add (typeid) {
          console.log(typeid)
          if(typeid){
              this.$set(this.formInfo,"equType",typeid)
          }
        this.edit()
      },
      edit (record) {

        this.$objToOverride(this.formInfo, record)
        if (this.formInfo.id) {
          getAction(this.url.getInfo, { 'id': record.id }).then(res => {
            this.$nextTick(() => {
              this.formInfo = res.result.data
                let roomValue=[]
                if(this.formInfo.addressId){
                    roomValue.push(this.formInfo.addressId+'')
                }
                if(this.formInfo.buildingId){
                    roomValue.push(this.formInfo.buildingId+'')
                }
                if(this.formInfo.floorId){
                    roomValue.push(this.formInfo.floorId+'')
                }
                if(this.formInfo.roomId){
                    roomValue.push(this.formInfo.roomId+'')
                }
                this.roomValue=roomValue
            })
          })
        }

        this.initData(true)
        this.visible = true
      },
        getRoomListTree() {
            getAction(this.url.listTree).then((res) => {
                this.optionsRoom = res.result.data
            })
        },
        initData (firstFlag) {
            getAction(this.url.treelist,{}).then(res => {
                if (firstFlag) {
                    if(res.result.data[0].children) {
                        const treeLv2 = res.result.data[0].children.map((item, index, arr) => {
                            const treeLv2Tmp = (item.key)
                            return treeLv2Tmp
                        })
                        this.expandedKeys = treeLv2
                        expandedKeySource = treeLv2
                    }
                }
                this.typeTree = res.result.data
            })
        },
        setRepDate(){
            // if(!this.formInfo.repDate){
                if(this.formInfo.stDate&&this.formInfo.lifes&&this.formInfo.lifesUnit){
                    let scdate = new Date(this.formInfo.stDate)
                    console.log(scdate)
                    if(this.formInfo.lifesUnit=='h'){
                        let repdate = new Date()
                        repdate.setDate(scdate.getDate()+(this.formInfo.lifes/24))
                        this.$set(this.formInfo,"repDate",this.formatDate(repdate))
                    }else if(this.formInfo.lifesUnit=='day'){
                        let repdate = new Date()
                        repdate.setDate(scdate.getDate()+(this.formInfo.lifes*1.0))
                        this.$set(this.formInfo,"repDate",this.formatDate(repdate))
                    }else if(this.formInfo.lifesUnit=='mon'){
                        const [year,month,day] = [scdate.getFullYear(),scdate.getMonth(),scdate.getDate()]
                        console.log(year,month,day)
                        let repdate = new Date(year,month+this.formInfo.lifes*1.0,day)
                        this.$set(this.formInfo,"repDate",this.formatDate(repdate))
                    }else if(this.formInfo.lifesUnit=='year'){

                        const [year,month,day] = [scdate.getFullYear(),scdate.getMonth(),scdate.getDate()]
                        let repdate = new Date(year+this.formInfo.lifes*1.0,month,day)
                        this.$set(this.formInfo,"repDate",this.formatDate(repdate))
                    }
                }
            // }
        },
        formatDate(date) {
            let year = date.getFullYear();
            let month = (1 + date.getMonth()).toString().padStart(2, '0');
            let day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
      // 确定
      handleSubmit () {
        // 触发表单验证
        this.confirmLoading = true
        this.$refs.ruleForm.validate(valid => {
          console.log(valid)
          if (valid) {
              if(this.roomValue){
                  this.formInfo.roomValue = this.roomValue.join(",")
              }
            postAction(this.url.saveInfo, this.formInfo).then(res => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      // 关闭
      handleCancel () {
        this.close()
      },
      close () {
        this.$refs.ruleForm.resetFields()
        this.$objToReset(this.formInfo)
          this.roomValue=[]
        this.$emit('close')
        this.visible = false
      },
      editorOk (val) {
        this.formInfo.content = val
      },
        // 值变化处理
        handleChange(value, selectedOptions) {
           console.log(value)
        }
    }
  }
</script>
